{% extends "conmon/style.html" %}{% block content %}
<style>
    /* .rowtable tbody tr td{ text-align: center;} */
</style>
<div class="container1">
    <div class="header">
        <div class="Mytab" style="text-align:center;">
            <thead>人员信息</thead>
            <table class="mytabstyle rowtable" style="width: 100%;overflow-x: scroll;">
                <tr>
                    <td width="30"><input type="checkbox" /></td>
                    <td>*姓名</td>
                    <td>机构内身份</td>
                    <td>人员状态</td>
                    <td>*证件类别</td>
                    <td>*证件号码</td>
                    <td>性别</td>
                    <td>国籍</td>
                    <td>学历</td>
                    <td>从事涉税专业服务时间</td>
                    <td>入职日期</td>
                    <td>移动电话</td>
                    <td>电子邮箱</td>
                    <td>政治面貌</td>
                    <td>是否党支部书记（党组织）</td>
                    <td>从事涉税专业服务情况</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>
                        <p>
                            <div class="layui-inline" style="width:98%; display:block; margin:auto;">
                                <select name="modules" lay-verify="required" lay-search="">
                                    <option value="">直接选择或搜索选择</option>
                                    <option value="1">layer</option>
                                    <option value="2">form</option>
                                </select>
                            </div>
                        </p>
                    </td>
                    <td>
                        <p> <input type="text" class="layui-input" value="自动带出，不可修改" disabled></p>
                    </td>
                    <td>
                        <p> <input type="text" class="layui-input" value="自动带出，不可修改" disabled></p>
                    </td>
                    <td>
                        <p> <input type="text" class="layui-input" value="自动带出，不可修改" disabled></p>
                    </td>
                    <td>
                        <p> <input type="text" class="layui-input" value="自动带出，不可修改" disabled></p>
                    </td>
                    <td>
                        <p> <input type="text" class="layui-input" value="自动带出，不可修改" disabled></p>
                    </td>
                    <td>
                        <p> <input type="text" class="layui-input" value="自动带出，不可修改" disabled></p>
                    </td>
                    <td>
                        <p> <input type="text" class="layui-input" value="自动带出，不可修改" disabled></p>
                    </td>
                    <td>
                        <p> <input type="text" class="layui-input" value="自动带出，不可修改" disabled></p>
                    </td>
                    <td>
                        <p> <input type="text" class="layui-input" value="自动带出，不可修改" disabled></p>
                    </td>
                    <td>
                        <p> <input type="text" class="layui-input" value="自动带出，不可修改" disabled></p>
                    </td>
                    <td>
                        <p> <input type="text" class="layui-input" value="自动带出，不可修改" disabled></p>
                    </td>
                    <td>
                        <p> <input type="text" class="layui-input" value="自动带出，不可修改" disabled></p>
                    </td>
                    <td>
                        <p> <input type="text" class="layui-input" value="自动带出，不可修改" disabled></p>
                    </td>
                    <td>
                        <p> <input type="text" class="layui-input" value="自动带出，不可修改" disabled></p>
                    </td>
                </tr>
            </table>
            <div style="margin: 15px 0 15px 0;text-align: center;">
                <input type="button" value="添加行" class="darkbluebtn" />
                <div class="My_btn_small orgbtn">删除行</div>
            </div>
        </div>
    </div>
    <div style="margin: 15px 0 15px 0;text-align: center;">
        <div class="My_btn_small orgbtn">新增证书</div>
        <div class="My_btn_small orgbtn">人员信息变更</div>
        <div class="My_btn_small orgbtn">资格证书变更</div>
        <div class="My_btn_small orgbtn">删除证书</div>
    </div>
    <div class="header">
        <div class="Mytab" style="text-align:center;">
            <table class="mytabstyle rowtable" style="width: 100%;overflow-x: scroll;">
                <thead>人员信息变更</thead>
                <tr>
                    <td>人员</td>
                    <td>变更项目</td>
                    <td>变更前内容</td>
                    <td>变更后内容</td>
                    <td>变更说明</td>
                    <td>操作</td>
                </tr>
                <tr>
                    <td>
                        <p style="text-align: center;">根据人员信息带入</p>
                    </td>
                    <td>
                        <p style="text-align: center;">*税务机关</p>
                    </td>
                    <td>
                        <p>自动带入</p>
                    </td>
                    <td>
                            <p> <input type="text" class="layui-input" value="自动带出，不可修改" disabled></p>
                    </td>
                    <td>
                        <p><input type="text" style="text-align: left;" value="变更说明" /></p>
                    </td>
                    <td>
                        <p><input type="file" /></p>
                    </td>
                </tr>
            </table>
            <div style="margin: 15px 0 15px 0;text-align: center;">
                <div class="My_btn_small orgbtn">删除行</div>
            </div>
        </div>
    </div>
    <div class="header">
        <div class="Mytab">
            <table class="mytabstyle rowtable" style="width: 100%;overflow-x: scroll;">
                <thead>资格证书变更</thead>
                <tr>
                    <td>人员</td>
                    <td>证件</td>
                    <td>变更项目</td>
                    <td>变更前内容</td>
                    <td>变更后内容</td>
                    <td>变更说明</td>
                    <td>资格证书影印件</td>
                    <td>操作</td>
                </tr>
                <tr>
                    <td>
                            <p> <input type="text" class="layui-input" value="自动带出，不可修改" disabled></p>
                    </td>
                    <td>
                        <p><input type="text" style="text-align: left;" value="" /></p>
                    </td>
                    <td>
                        <p><input type="text" style="text-align: left;" value="" /></p>
                    </td>
                    <td>
                        <p><input type="text" style="text-align: left;" value="" /></p>
                    </td>
                    <td>
                        <p><input type="text" style="text-align: left;" value="" /></p>
                    </td>
                    <td>
                        <p><input type="text" style="text-align: left;" value="" /></p>
                    </td>
                    <td>
                        <p><input type="file" /></p>
                        
                    </td>
                    <td>
                        <p><input type="button" style="text-align: left;" value="添加变更项目" /></p>
                    </td>
                </tr>
            </table>
            <div style="margin: 15px 0 15px 0;text-align: center;">
                <div class="My_btn_small orgbtn">删除行</div>
            </div>
        </div>
    </div>
    <div class="header">
        <div class="Mytab">
            <table class="mytabstyle rowtable" style="width: 100%;overflow-x: scroll;">
                <thead>新增资格证书</thead>
                <tr>
                    <td>*姓名</td>
                    <td>*证件类别</td>
                    <td>*证件号码</td>
                    <td>*职业资格证书类别</td>
                    <td>*证书编号</td>
                    <td>证书发证机关</td>
                    <td>证书取得时间</td>
                    <td>资格证书影印件</td>
                    <td>操作</td>
                </tr>
                <tr>
                    <td>
                        <p> <input type="text" class="layui-input" value="自动带出，不可修改" disabled></p>
                    </td>
                    <td>
                        <p><input type="text" style="text-align: left;" value="" /></p>
                    </td>
                    <td>
                        <p><input type="text" style="text-align: left;" value="" /></p>
                    </td>
                    <td>
                        <p><input type="text" style="text-align: left;" value="" /></p>
                    </td>
                    <td>
                        <p><input type="text" style="text-align: left;" value="" /></p>
                    </td>
                    <td>
                        <p><input type="text" style="text-align: left;" value="" /></p>
                    </td>
                    <td>
                        <p><input type="text" style="text-align: left;" value="" /></p>
                    </td>
                    <td>
                        <p><input type="file" /></p>
                    </td>
                    <td>
                        <p><input type="button" style="text-align: left;" value="继续添加" /></p>
                    </td>
                </tr>
            </table>
            <div style="margin: 15px 0 15px 0;text-align: center;">
                <div class="My_btn_small orgbtn">删除行</div>
            </div>
        </div>
    </div>
    <div class="header">
        <div class="Mytab">
            <table class="mytabstyle rowtable" style="width: 100%;overflow-x: scroll;">
                <thead>删除资格证书</thead>
                <tr>
                    <td>*姓名</td>
                    <td>*证件类别</td>
                    <td>*证件号码</td>
                    <td>*职业资格证书类别</td>
                    <td>*证书编号</td>
                    <td>证书发证机关</td>
                    <td>证书取得时间</td>
                    <td>资格证书影印件</td>
                </tr>
                <tr>
                    <td>
                        <p> <input type="text" class="layui-input" value="自动带出，不可修改" disabled></p>
                    </td>
                    <td>
                        <p><input type="text" style="text-align: left;" value="" /></p>
                    </td>
                    <td>
                        <p><input type="text" style="text-align: left;" value="" /></p>
                    </td>
                    <td>
                        <p><input type="text" style="text-align: left;" value="" /></p>
                    </td>
                    <td>
                        <p><input type="text" style="text-align: left;" value="" /></p>
                    </td>
                    <td>
                        <p><input type="text" style="text-align: left;" value="" /></p>
                    </td>
                    <td>
                        <p><input type="text" style="text-align: left;" value="" /></p>
                    </td>
                    <td>
                        <p><input type="button" style="text-align: left;" value="删除" /></p>
                    </td>
                </tr>
            </table>
            <div style="margin: 15px 0 15px 0;text-align: center;">
                <div class="My_btn_small orgbtn">删除行</div>
            </div>
        </div>
    </div>
</div>
<div style="margin: 15px 0 15px 0;text-align: center;">
    <input type="button" value="报送" class="darkbluebtn" />
    <div class="My_btn_small orgbtn">返回</div>
</div>
<!-- <script src="/public/plugins/layui/layui.js"></script> -->
<script>
    layui.use('element', function() {
        var $ = layui.jquery,
            element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        //触发事件
        var active = {
            tabAdd: function() {
                //新增一个Tab项
                element.tabAdd('demo', {
                    title: '新选项' + (Math.random() * 1000 | 0) //用于演示
                        ,
                    content: '内容' + (Math.random() * 1000 | 0),
                    id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                })
            },
            tabDelete: function(othis) {
                //删除指定Tab项
                element.tabDelete('demo', '44'); //删除：“商品管理”


                othis.addClass('layui-btn-disabled');
            },
            tabChange: function() {
                //切换到指定Tab项
                element.tabChange('demo', '22'); //切换到：用户管理
            }
        };

        $('.site-demo-active').on('click', function() {
            var othis = $(this),
                type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });

        //Hash地址的定位
        var layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);

        element.on('tab(test)', function(elem) {
            location.hash = 'test=' + $(this).attr('lay-id');
        });

    });
</script>
{% endblock %}